<!--
* @description 消防设施
* @author zywu
* @date 2020/12/14 15:26:45
!-->
<template>
  <div class="section section-base section-device text-l">
    <div class="font24 colorYellow">接入消防设施</div>
    <div style="padding-top: 20px;">
      <div class="font20">合计接入消防设施</div>
      <div class="flex-start" style="align-items: baseline;margin-top: 20px;">
        <count-to class="font40" :startVal="0" :endVal="dataCount" :duration="3000"></count-to>
        <div class="font16">个</div>
      </div>
    </div>
    <!-- 饼图 -->
    <div id="page_4" style="position: relative;">
      <!-- line start -->
      <div v-if="pieData[0].count>0" class="yearReportText pieNum" style="margin-top: -100px;">{{pieData[0].count}}</div>
      <div v-if="pieData[1].count>0" class="yearReportText pieNum" style="margin-top: -80px;">{{pieData[1].count}}</div>
      <div v-if="pieData[2].count>0" class="yearReportText pieNum" style="margin-top: -60px;">{{pieData[2].count}}</div>
      <div v-if="pieData[3].count>0" class="yearReportText pieNum" style="margin-top: -40px;">{{pieData[3].count}}</div>
      <div v-if="pieData[4].count>0" class="yearReportText pieNum" style="margin-top: -20px;">{{pieData[4].count}}</div>
      <!-- line end -->
      <div id="page_4_category" style="width:100%;height:100%;margin-top: 20px;"></div>
    </div>
    <!-- legent 菜单栏 -->
    <div style="float: left;margin-top: -40px; margin-left: calc(50% - 130px);word-wrap:break-word;padding: 5px;">
      <div v-if="pieData[0].count>0" class="pieTitle" style="background-color:#FFD986;"></div>
      <div v-if="pieData[0].count>0" class="pieName pieDescript" style="float: left; font-size: 12px;">{{pieData[0].categoryName}}</div>
      <div v-if="pieData[1].count>0" style="float: left;">
        <div class="pieTitle" style="background-color:#7DA5E6;"></div>
        <div class="pieName pieDescript" style="float: left;font-size: 12px;">{{pieData[1].categoryName}}</div>
      </div>
      <div v-if="pieData[2].count>0" style="float: left;">
        <div class="pieTitle" style="background-color:#B2CBE6;"></div>
        <div class="pieName pieDescript" style="float: left;font-size: 12px;">{{pieData[2].categoryName}}</div>
      </div>
      <div v-if="pieData[3].count>0" style="float: left;">
        <div class="pieTitle" style="background-color:#FF7878;"></div>
        <div class="pieName pieDescript" style="float: left;font-size: 12px;">{{pieData[3].categoryName}}</div>
      </div>
      <div v-if="pieData[4].count>0" style="float: left;">
        <div class="pieTitle" style="background-color:#EBF3F8;"></div>
        <div class="pieName pieDescript" style="float: left;font-size: 12px;">{{pieData[4].categoryName}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    reportData: {
      type: Object,
      default: function () {
        return {
          joinTime: {},
        }
      },
    },
    active: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      pieData: [
        { count: 0, categoryName: '' },
        { count: 0, categoryName: '' },
        { count: 0, categoryName: '' },
        { count: 0, categoryName: '' },
        { count: 0, categoryName: '' },
      ],
      dataCount: 0,
    }
  },
  watch: {
    active(val) {
      if (val) {
        this.$nextTick(() => {
          this.dataCount = this.reportData.fireSystem.equipmentCount || 0
          this.init()
        })
      }
    },
  },
  methods: {
    init() {
      let data = this.reportData
      let pieData = []
      if (data.fireSystem.dataList.length > 5) {
        pieData = data.fireSystem.dataList.slice(0, 5)
      } else {
        pieData = data.fireSystem.dataList
      }

      let sortPieData = Array.apply(null, new Array(5)).map((item, index) => {
        return pieData[index] || { count: 0, categoryName: '' }
      })
      this.pieData = pieData
      this.getPie(pieData)
    },
    getPie(pieData) {
      var myChart = echarts.init(document.getElementById('page_4_category'))
      let totalPie = 0
      pieData.map((item) => {
        totalPie += item.count
      })
      let pieDataConcat = Array.apply(null, new Array(5)).map((item, index) => {
        return pieData[index] || { count: 0, categoryName: '' }
      })
      pieDataConcat.reverse()
      let colorList = ['#EBF3F8', '#FF7878', '#B2CBE6', '#7DA5E6', '#FFD986']
      for (let i = 0; i < pieDataConcat.length; i++) {
        if (pieDataConcat[i].count == 0) {
          colorList[i] = '#C34340'
        }
      }
      let option = {
        title: {
          text: '消防设施Top5',
          left: 'center',
          top: 0,
          textStyle: { color: '#ffffff' },
        },
        series: [
          {
            type: 'pie',
            clockWise: true, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            radius: [19, 20],
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: true,
                },
                borderWidth: 8,
                shadowBlur: 40,
                borderColor: '#C34340',
                shadowColor: 'rgba(0, 0, 0, 0)', //边框阴影
              },
            },
            data: [
              {
                value: totalPie - pieDataConcat[0].count || 1, //总数-真实值
              },
              {
                value: pieDataConcat[0].count, //真实值
                hoverAnimation: false, //鼠标移入变大
                itemStyle: {
                  normal: {
                    label: {
                      show: false,
                      position: 'outside',
                    },
                    labelLine: {
                      show: false,
                      length: 1,
                      length2: 60,
                      smooth: 0,
                      color: 'white', // 改变标示线的颜色
                      position: 'right',
                    },
                    color: 'white',
                    borderColor: colorList[0],
                    borderWidth: 8,
                  },
                },
              },
            ],
          },
          {
            type: 'pie',
            clockWise: true, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            radius: [39, 40],
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: true,
                },
                borderWidth: 8,
                shadowBlur: 40,
                borderColor: '#C34340',
                shadowColor: 'rgba(0, 0, 0, 0)', //边框阴影
              },
            },
            data: [
              {
                value: totalPie - pieDataConcat[1].count || 1,
              },
              {
                value: pieDataConcat[1].count,
                hoverAnimation: false, //鼠标移入变大
                itemStyle: {
                  normal: {
                    label: {
                      show: false,
                      position: 'outside',
                    },
                    labelLine: {
                      show: false,
                      smooth: 0.5,
                      length: 1,
                      length2: 60,
                    },
                    color: 'white',
                    borderColor: colorList[1],
                    borderWidth: 8,
                  },
                },
              },
            ],
          },
          {
            type: 'pie',
            clockWise: true, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            radius: [59, 60],
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: true,
                },
                borderWidth: 8,
                shadowBlur: 40,
                borderColor: '#C34340',
                shadowColor: 'rgba(0, 0, 0, 0)', //边框阴影
              },
            },
            data: [
              {
                value: totalPie - pieDataConcat[2].count || 1,
              },
              {
                value: pieDataConcat[2].count,

                hoverAnimation: false, //鼠标移入变大
                itemStyle: {
                  position: [100, 10],
                  normal: {
                    label: {
                      show: false,
                      position: 'outside',
                    },
                    labelLine: {
                      show: false,
                      length: 1,
                      length2: 120,
                      smooth: 0.5,
                    },
                    color: 'white',
                    borderColor: colorList[2],
                    borderWidth: 8,
                  },
                },
              },
            ],
          },
          {
            type: 'pie',
            clockWise: true, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            radius: [79, 80],
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: true,
                },
                borderWidth: 8,
                shadowBlur: 40,
                borderColor: '#C34340',
                shadowColor: 'rgba(0, 0, 0, 0)', //边框阴影
              },
            },
            data: [
              {
                value: totalPie - pieDataConcat[3].count || 1,
              },
              {
                value: pieDataConcat[3].count,
                hoverAnimation: false, //鼠标移入变大
                itemStyle: {
                  normal: {
                    label: {
                      show: false,
                      position: 'outside',
                    },
                    labelLine: {
                      show: false,
                      length: 1,
                      length2: 120,
                      smooth: 0.5,
                    },
                    color: 'white',
                    borderColor: colorList[3],
                    borderWidth: 8,
                  },
                },
              },
            ],
          },
          {
            type: 'pie',
            clockWise: true, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            radius: [99, 100],
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: true,
                },

                borderWidth: 8,
                shadowBlur: 40,
                borderColor: '#C34340',
                shadowColor: 'rgba(0, 0, 0, 0)', //边框阴影
              },
            },
            data: [
              {
                value: totalPie - pieDataConcat[4].count || 1,
                name: '70%',
              },
              {
                value: pieDataConcat[4].count,

                hoverAnimation: false, //鼠标移入变大
                itemStyle: {
                  normal: {
                    label: {
                      show: false,
                      position: 'outside',
                    },
                    labelLine: {
                      show: false,
                      length: 1,
                      length2: 120,
                      smooth: 0.5,
                    },
                    color: 'white',
                    borderColor: colorList[4],
                    borderWidth: 8,
                  },
                },
              },
            ],
          },
        ],
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.clear()
      myChart.setOption(option)
    },
  },
  mounted() {},
}
</script>